import React from "react";
import "./index.scss";
// 骨架屏结构信息
import {SKELETONINFO} from './skeletonInfo'

const SkeletonLoading = props => {
  const { fixed = true, skeletonId = "" } = props;
  if (skeletonId && SKELETONINFO[skeletonId]) {
    return (
      <div id="skeleton" className="skeleton-box">
        {SKELETONINFO[skeletonId].map((item, index) => {
          return (
            <div
              className="skeleton-item"
              key={index}
              id={item.id}
              style={{
                width: item.width / 3.75 + "vw",
                height: item.height / 3.75 + "vw",
                left: item.left / 3.75 + "vw",
                top: item.top / 3.75 + "vw"
              }}
            ></div>
          );
        })}
      </div>
    );
  } else {
    return (
      <div className={`loading-wrap ${fixed ? "fixed" : ""}`}>
        <div className="loading">
          <div className="box">
            <div className="line"></div>
            <div className="line"></div>
            <div className="line"></div>
            <div className="line"></div>
            <div className="line"></div>
            <div className="line"></div>
          </div>
        </div>
      </div>
    );
  }
};

export default SkeletonLoading;
